<script setup lang="ts">
import { ref } from 'vue'
import router from '@/router'
const settings = ref({
  notifications: {
    email: true,
    push: false,
    sms: false
  },
  privacy: {
    profileVisibility: 'public',
    showOnlineStatus: true,
    allowTagging: true
  },
  appearance: {
    theme: 'light',
    fontSize: 'medium',
    compactMode: false
  },
  security: {
    twoFactorAuth: false,
    sessionTimeout: 30
  }
})

const handleSave = () => {
  console.log('Settings saved:', settings.value)
}

const handleJump = () => {
  // window.$wujie.bus.$emit('base-app:navigate', { path: 'dashboard' })
  router.push('/dashboard')
}
</script>

<template>
  <div>
    <h1>Settings</h1>
    <a-button type="primary" @click="handleJump">Save Changes</a-button>
    <p>Manage your application preferences and account settings.</p>
    
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" tab="Notifications">
        <a-card>
          <a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-form-item label="Email Notifications">
              <a-switch v-model:checked="settings.notifications.email" />
            </a-form-item>
            <a-form-item label="Push Notifications">
              <a-switch v-model:checked="settings.notifications.push" />
            </a-form-item>
            <a-form-item label="SMS Notifications">
              <a-switch v-model:checked="settings.notifications.sms" />
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
              <a-button type="primary" @click="handleSave">Save Changes</a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-tab-pane>
      
      <a-tab-pane key="2" tab="Privacy">
        <a-card>
          <a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-form-item label="Profile Visibility">
              <a-select v-model:value="settings.privacy.profileVisibility">
                <a-select-option value="public">Public</a-select-option>
                <a-select-option value="friends">Friends Only</a-select-option>
                <a-select-option value="private">Private</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="Show Online Status">
              <a-switch v-model:checked="settings.privacy.showOnlineStatus" />
            </a-form-item>
            <a-form-item label="Allow Tagging">
              <a-switch v-model:checked="settings.privacy.allowTagging" />
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
              <a-button type="primary" @click="handleSave">Save Changes</a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-tab-pane>
      
      <a-tab-pane key="3" tab="Appearance">
        <a-card>
          <a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-form-item label="Theme">
              <a-radio-group v-model:value="settings.appearance.theme">
                <a-radio-button value="light">Light</a-radio-button>
                <a-radio-button value="dark">Dark</a-radio-button>
                <a-radio-button value="system">System</a-radio-button>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="Font Size">
              <a-radio-group v-model:value="settings.appearance.fontSize">
                <a-radio-button value="small">Small</a-radio-button>
                <a-radio-button value="medium">Medium</a-radio-button>
                <a-radio-button value="large">Large</a-radio-button>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="Compact Mode">
              <a-switch v-model:checked="settings.appearance.compactMode" />
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
              <a-button type="primary" @click="handleSave">Save Changes</a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-tab-pane>
      
      <a-tab-pane key="4" tab="Security">
        <a-card>
          <a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-form-item label="Two-Factor Authentication">
              <a-switch v-model:checked="settings.security.twoFactorAuth" />
            </a-form-item>
            <a-form-item label="Session Timeout (minutes)">
              <a-slider v-model:value="settings.security.sessionTimeout" :min="5" :max="60" :step="5" />
            </a-form-item>
            <a-form-item label="Change Password">
              <a-button>Reset Password</a-button>
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
              <a-button type="primary" @click="handleSave">Save Changes</a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>